<!-- 令牌购买 -->
<template>
  <div class="pag"><!-- :class="{'adjust-height': choose > 0}"-->
      <cube-popup type="my-popup" ref="ads-active" maskClosable v-show="showAds">
          <div class="active-ct">
              <div class="content img-explain">
                  <cube-scroll ref="look-active-scroll" style="background:#fff;border-radius:6px;">
                     <img :src="activeImg" alt="" @load="reFreshImg">
                  </cube-scroll>
              </div>
              <div class="close">
                  <p @click="closeActive">我已了解</p>
              </div>
          </div>
      </cube-popup>
      <cube-popup type="my-popup" ref="upgradeMember" class="my-popup" maskClosable v-show="showNotice">
          <div class="active-ct">
              <div class="content">
                  <div style="background:#fff;">
                      <h2>提示</h2>
                      <p style="text-align:center;">可用余额不足够质押 <span style="color:#EB3257;">{{nonPledgeTotal}}</span> 个挖矿节点</p>
                      <p style="text-align:center;">请充值CVNT后再进行质押</p>
                  </div>
              </div>
              <div class="submit-btn">
                  <span @click="showChargeNotice">充值</span>
                  <span @click="keepSame">保持非质押挖矿方式</span>
              </div>
          </div>
      </cube-popup>
      <cube-popup type="my-popup" ref="upgradeMember" class="my-popup" maskClosable v-show="showPledgeAll">
          <div class="active-ct">
              <div class="content">
                  <div style="background:#fff;">
                      <h2>全部质押</h2>
                      <p class="pledge">选中的 <span style="color:#EB3257;">{{choose}}</span> 个节点中，非质押挖矿的方式共有 <span style="color:#EB3257;">{{nonPledgeTotal}}</span> 个节点。是否耗费 <span style="color:#EB3257;">{{nonPledgeTotal * 3000}}cvnt</span> 对他们进行质押？<span>{{nonPledgeTotal}}</span>个节点的挖矿方式也将从非质押改为质押方式，<!--收益从全额升为双倍-->收益从50%升为100%。</p>
                  </div>
              </div>
              <div class="submit-btn">
                  <span @click="confirmPledgeAll">是</span>
                  <span @click="cancelPledgeAll">再想想</span>
              </div>
          </div>
      </cube-popup>
      <cube-popup type="my-popup" ref="upgradeMember" class="my-popup" maskClosable v-show="showRemoveAll">
          <div class="active-ct">
              <div class="content">
                  <div style="background:#fff;">
                      <h2>全部解除质押</h2>
                      <p class="pledge">选中的 <span style="color:#EB3257;">{{choose}}</span> 个节点中，以质押挖矿的方式共有 <span style="color:#EB3257;">{{pledgeTotal}}</span> 个节点。是否解除他们的质押，<span style="color:#EB3257;">{{pledgeTotal * 3000}}cvnt</span> 将在72小时后返回你的可用余额。<span>{{pledgeTotal}}</span>个节点的挖矿方式也将从质押改为非质押，<!--收益从双倍降为全额-->收益从100%降为50%。节点需要用质押挖矿方式挖矿7天 </p>
                  </div>
              </div>
              <div class="submit-btn">
                <span @click="confirmRemoveAll">是</span>
                <span @click="cancelRemoveAll">再想想</span>
              </div>
          </div>
      </cube-popup>
      <cube-popup type="my-popup" class="my-popup" ref="warn-active" maskClosable v-show="showWarn">
          <div class="active-ct">
              <div class="content">
                  <div style="background:#fff;">
                      <h2>危险提示</h2>
                      <!--<p style="text-align:center;">可用碎片已质押完毕
                      </p>-->
                      <p style="text-align:center;">您已连续 <span style="color:#DC0630;">{{violationNum}}天</span> 离线时长超过12小时，请尽快恢复节点上线，离线状态超过连续3天维持在12小时以上将扣除50%的质押金
                      </p>
                  </div>
              </div>
              <div class="close">
                  <p @click="closeWarn">确定</p>
              </div>
          </div>
      </cube-popup>
      <cube-scroll ref="scroll" :data="offerList" @scroll="pageScroll" :scrollEvents="['scroll']" :options="options" @pulling-up="onPullingUp"><!-- :options="options" @pulling-up="onPullingUp"-->
          <div class="pledge-banner router-pledge">
              <h3><span class="left">&nbsp;</span>超级节点 <strong>{{nodeData.superName}}</strong> 旗下矿工<span class="right">&nbsp;</span></h3>
          </div>
          <div class="node-data node-first">
              <div class="data-normal data-title">
                  <div class="data-left" @click="goProfitDetail">
                      <h3>昨日收益(CVNT)<img src="~assets/images/newMining/right.png" alt=""></h3>
                      <p>{{nodeData.lastCvn}}</p>
                  </div>
                  <div class="data-right">
                      <h3>累计收益(CVNT)</h3>
                      <p>{{nodeData.totalCvn}}</p>
                  </div>
              </div>
              <div class="data-normal">
                  <div class="data-left">
                      <h3>昨日贡献流量</h3>
                      <p>{{nodeData.lastFlow}}</p>
                  </div>
                  <div class="data-left">
                      <h3>累计贡献流量</h3>
                      <p>{{nodeData.userTotalFlow}}</p>
                  </div>
              </div>
              <div class="data-normal">
                  <div class="data-left">
                      <h3>昨日全网贡献量</h3>
                      <p>{{nodeData.totalFlow}}</p>
                  </div>
                  <div class="data-left">
                      <h3>昨日全网CDN收益</h3>
                      <p>{{nodeData.lastAllCvn}}CVNT</p>
                  </div>
              </div>
              <h2>我的贡献量占全网的&nbsp;&nbsp;<span>{{nodeData.rate}}</span></h2>
          </div>
          <div class="node-data">
              <div class="data-normal">
                  <div class="data-left">
                      <h3>可用余额</h3>
                      <p>{{nodeData.userWithCvn}}CVNT</p>
                  </div>
                  <div class="data-left">
                      <h3>不可用余额(质押)</h3>
                      <p>{{nodeData.userUnWithCvn}}CVNT</p>
                  </div>
              </div>
              <div class="data-normal">
                  <div class="data-left">
                      <h3>质押节点数(100%收益)</h3>
                      <!--<h3>质押节点数(双倍收益)</h3>-->
                      <p>{{nodeData.pledgeNums}}</p>
                  </div>
                  <div class="data-left">
                      <h3>未质押节点数(50%收益)</h3>
                      <!--<h3>未质押节点数(全额收益)</h3>-->
                      <p>{{nodeData.unPledgeNums}}</p>
                  </div>
                </div>
          </div>
          <div class="scroll-area">
              <div class="tab-area">
                  <h3 class="tab-info">
                      <span>&nbsp;</span>节点列表<img @click="showExplain" src="~assets/images/token/fq.png" alt="">
                  </h3>
                  <!--<p class="tab-btn">
                      <span @click="chooseView(0)" :class="{'selected': tab == 0}">碎片视图</span><span @click="chooseView(1)" :class="{'selected': tab == 1}">令牌视图</span>
                  </p>-->
              </div>
              <h4>*若单个节点在线低于12小时则没有收益</h4>
              <div class="code-content">
                  <div class="code-title">
                      <div>&nbsp;</div><div>序号</div><div>名称</div><div>流量</div><div>时长</div><div>方式</div><div>操作</div>
                  </div>
                  <div class="scroll-list-wrap"><!-- v-show="offerList && offerList.length > 0"-->
                      <!--<cube-scroll>--><!-- @pulling-down="onPullingDown"-->
                      <div class="code-item" v-for="(item, index) in offerList" :class="{'add-margin-bottom': choose > 0 && (offerList.length - index == 1)}"><!-- :class="{'add-margin-bottom': choose > 0 && (offerList.length - index == 1)}"-->
                          <div class="detail">
                              <div class="token">
                                  <div class="check-box">
                                      <img @click="toggleChoose(item.isChosen, index, offerList, item.node_id)" v-if="item.isChosen == 1" src="~assets/images/newMining/check.png" alt="">
                                      <img @click="toggleChoose(item.isChosen, index, offerList, item.node_id)" v-if="item.isChosen == 0" src="~assets/images/newMining/uncheck.png" alt="">
                                  </div>
                                  <div class="serial-num">
                                      <p @click="showWarningNotice(item.offline)" v-if="item.offline > 0 && (item.token_status == 2 || item.token_status == 3)"><img src="~assets/images/newMining/warning.png" alt=""></p>
                                      <p v-else>{{offerList.length - index}}</p>
                                  </div>
                                  <div class="name">
                                      <p>{{item.name}}</p>
                                      <img class="status" v-if="item.status == 0" src="~assets/images/newMining/ng.png" alt="">
                                      <img class="status" v-if="item.status == 1" src="~assets/images/newMining/checking.png" alt="">
                                      <img class="status" v-if="item.status == 2" src="~assets/images/newMining/running.png" alt="">
                                      <img class="status" v-if="item.status == 3" src="~assets/images/newMining/offline.png" alt="">
                                      <img class="storage" v-if="item.type == 1 && item.storage == 2" src="~assets/images/newMining/yes.png" alt="">
                                      <img class="storage" v-if="item.type == 1 && item.storage == 1" src="~assets/images/newMining/no.png" alt="">
                                      <img class="storage" v-if="item.type == 1 && (item.storage == 3 || item.storage == 4)" src="~assets/images/newMining/bad.png" alt="">
                                  </div>
                                  <div class="flow">
                                      <!--{{(Number(item.flow) / 1024 ).toFixed(1)}}MB-->
                                      {{formatFlow(item.flow)}}
                                  </div>
                                  <div class="online-time">
                                      <span v-if="item.online >= 12" style="color:#00A989">{{item.online}}h</span>
                                      <span v-if="item.online < 12" style="color:#DC0630">{{item.online}}h</span>
                                  </div>
                                  <div class="mining-way">
                                      <p v-if="item.token_status == 1" style="color:#2B75F3;">非质押挖矿</p>
                                      <p v-if="item.token_status == 2 || item.token_status == 20" style="color:#F36D2B;">质押挖矿</p>
                                      <p v-if="item.token_status == 3" style="color:#D68A65;">解除质押挖矿</p>
                                      <h4 v-if="item.token_status == 1">50%收益</h4>
                                      <h4 v-if="item.token_status == 2 || item.token_status == 20">100%收益</h4>
                                      <!--<h4 v-if="item.token_status == 1">全额收益</h4>
                                      <h4 v-if="item.token_status == 2">双倍收益</h4>-->
                                      <h4 v-if="item.token_status == 3">无收益</h4>
                                  </div>
                                  <div class="action">
                                      <p class="btn unable-btn token-pledge" v-if="item.token_status == 20">令牌质押中</p>
                                      <p class="btn unable-btn" v-if="item.token_status == 2 && item.status == 3 && item.process > 0">解除质押</p>
                                      <p class="btn unable-btn" v-if="item.token_status == 1 && ((item.status == 0 && item.online > 0) || (item.status == 3 && item.process > 0))">挖矿质押</p>
                                      <p @click="openPledgeBox(item, offerList, index)" class="btn able-btn" v-if="item.token_status == 1 && (item.status == 1 || item.status == 2)">挖矿质押</p>
                                      <p class="text" v-if="item.token_status == 3 && item.process > 0"><span style="color:#DC0630;">{{item.process}}天</span>后</p>
                                      <h4 v-if="item.token_status == 3 && item.process > 0">可删除节点</h4>
                                      <p @click="openRemoveBox(item, offerList, index)" class="btn warning-btn" v-if="item.token_status == 2 && item.status != 3">解除质押</p>
                                      <p @click="deleteCurrentNode(item.node_id, index, offerList, item.isChosen)" class="btn able-btn" v-if="item.status == 1 || ( item.status == 0 && item.online <= 0 ) || ( item.status == 3 && item.process <= 0 )">删除节点</p>
                                      <!--<p @click="deleteCurrentNode(item.node_id, index, offerList)" class="btn able-btn" v-if="item.status == 1">删除节点</p>
                                      <p class="btn able-btn" v-if="item.status == 0 && item.online <= 0">删除节点</p>
                                      <p class="btn able-btn" v-if="item.status == 3 && item.process <= 0">删除节点</p>-->
                                  </div>
                              </div>
                          </div>
                          <div class="progress-bar">
                              <p class="success" v-if="item.status == 2 && item.token_status == 2"></p>
                              <p class="failure" v-if="item.token_status == 3" :style="{width: (Number(item.process) / 7 * 100).toFixed(2) + '%'}"></p>
                          </div>
                      </div>
                      <!--</cube-scroll>-->
                  </div>
                  <div class="no-result-wrapper" v-if="offerList && offerList.length == 0">
                      <h2 class="no-result">
                          <img src="~assets/images/miningboard/unstarted.png" alt="">
                          暂无明细
                      </h2>
                  </div>
              </div>
          </div>
      </cube-scroll>
      <div class="pledge-actions" ref="pledgeActions" v-show="choose > 0">
          <div @click="openPledgeAllBox">全部质押</div>
          <div @click="openRemoveAllBox">全部解除质押</div>
          <div @click="cancelChoose">取消选择</div>
      </div>
      <div class="backtop" v-show="showBackTop" @click.stop="backToTop">
          <img src="~assets/images/miningboard/back-top.png" alt="" >
      </div>
      <div class="mask" v-show="showMask" @click="closeMask($event)" @touchmove.prevent>
          <div ref="maskContent">
              <transition name="fade">
                <div class="general-height shopping-detail" v-if="showPledge">
                  <h3 class="title">挖矿质押</h3>
                  <div class="result">
                    <h3>您需要质押</h3>
                    <h3><span>3000</span>CVNT</h3>
                  </div>
                  <div class="content confirm-content">
                    <p><span>节点名称</span><strong>{{nodeName}}</strong></p>
                    <p class="number"><span>挖矿方式</span><strong>从“非质押”转换为“质押”</strong></p>
                    <!--<p class="number"><span>所得收益</span><strong>从全额提升至“双倍</strong></p>-->
                    <p class="number"><span>所得收益</span><strong>从“50%”提升至“100%”</strong></p>
                    <h4 class="number"><span>*</span>解除质押后需保持质押挖矿方式挖矿7天，以减少此节点流量的调度，在此期间没有挖矿收益</h4>
                    <h5 class="notice">
                       <img @click="togglePledge" v-if="control1" src="~assets/images/newMining/check.png" alt="">
                       <img @click="togglePledge" v-else src="~assets/images/newMining/uncheck.png" alt="">本次质押不再询问
                    </h5>
                  </div>
                  <div class="pay-btn">
                    <p @click.stop.prevent="confirmSinglePledge(offerList, indexNum)">确定</p><p @click.stop.prevent="cancelSinglePledge">取消</p>
                  </div>
                </div>
            </transition>
            <transition name="fade">
                <div class="general-height shopping-detail" v-if="showRemove">
                    <h3 class="title">解除质押</h3>
                    <div class="result">
                        <h3>您将解除所质押的</h3>
                        <h3><span>3000</span>CVNT</h3>
                    </div>
                    <div class="content confirm-content">
                        <p><span>节点名称</span><strong>{{nodeName}}</strong></p>
                        <p class="number"><span>挖矿方式</span><strong>从“质押”转换为“非质押”</strong></p>
                        <p class="number"><span>所得收益</span><strong>从“100%”降低至“50%”</strong></p>
                        <!--<p class="number"><span>所得收益</span><strong>从“双倍降低至“全额</strong></p>-->
                        <h4 class="number"><span>*</span>之后您还需保持质押挖矿方式挖矿7天，以减少此节点流量的调度，在此期间没有挖矿收益</h4>
                        <h5 class="notice">
                            <img @click="toggleRemove" v-if="control2" src="~assets/images/newMining/check.png" alt="">
                            <img @click="toggleRemove" v-else src="~assets/images/newMining/uncheck.png" alt="">本次操作不再询问
                        </h5>
                    </div>
                    <div class="pay-btn"><!--(offerList, indexNum)-->
                        <p @click.stop.prevent="confirmSingleRemove(offerList, indexNum)">确定</p><p @click.stop.prevent="cancelSingleRemove">取消</p>
                    </div>
                </div>
            </transition>
          </div>
      </div>
  </div>

</template>

<script>
  /*import md5 from 'js-md5';
  import 'common/js/gt';*/
  import {newMiningInfo, newNodeList, singleNodePledge, batchNodePledge, deleteNode } from 'api/register'

  export default {
    data() {
      return {
        indexNum: 0,
        way: 0,
        way1: 0,
        nodeId: 0,
        nodeName: '',
        showPledgeAll: false,
        showRemoveAll: false,
        pledgeTotal: 0,
        nonPledgeTotal: 0,
        choose: 0,
        selectAll: false,
        selectArr: [],
        idArr: [],   // 存储未质押节点的id的数组
        idArr1: [],  // 存储已质押节点的ID的数组
        activeImg: '',
        nodeData: {
          superName: '--',
          lastCvn: '--',    // 昨日收益
          totalCvn: '--',   // 累计收益
          lastFlow: '--',   // 昨日贡献量
          userTotalFlow: '--',   // 累计贡献量
          totalFlow: '--',       // 昨日全网贡献量
          lastAllCvn: '--',     // 昨日全网CDN收入
          rate: '--',           // 用户占全网比
          userWithCvn: '--',    // 用户可用余额
          userUnWithCvn: '--',   // 不可用余额
          pledgeNums: '--',      // 质押节点数
          unPledgeNums: '--',     // 未质押节点数
          miningCount: '--',
          nodeCount: '--'
        },
        nodePledgeNum: 0,
        nodeNum: 0,
        tokenNum: 0,
        showBackTop: false,
        isIOS: false,
        showAdjust: false,
        rotateImg: false,
        violationNum: 0,
        showWarn: false,
        showNotice: false,
        showAds: false,
        /*offerList: null,*/
        offerList: [
          /*{isChosen: 0, name: 'yyets_32134', flow: 235633, online: 10, token_status: 2, status: 3, type: 2, storage: 1, process: 2, offline: 3, node_id: 1},
          {*/
        ],
        options: {
          click: true,
          tap: true,
          pullUpLoad: true/*,
          pullDownRefresh: {
            threshold: 90,
            stop: 50,
            txt: '刷新成功'
          }*/
        },
        showPledge: false,
        showRemove: false,
        control1: false,
        control2: false,
        showMask: false,
        per: 20,
        page: 1,
        sw: true
      }
    },
    beforeRouteEnter (to, from, next) {
      next((vm) => {
        let query = to.query;
        Object.assign(vm, query);
        vm.uid = query.uid;
        vm.token = query.token;
        /*vm.pledgeTotal = 0;
        vm.nonPledgeTotal = 0;
        vm.choose = 0;*/
        vm.page = 1;
        vm.sw = true;
        vm.options.pullUpLoad = true;
        vm.setNormalStatus();
        vm.getMiningInfo();
        vm.getNodeList();
      })
    },
    mounted() {
      /*let u = navigator.userAgent;

      this.isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

      const h = document.body.scrollHeight;
      const H = window.innerHeight;*/


      /*if (this.isIOS) {
        document.body.addEventListener('focusin', () => {
          this.showAdjust = true;
        })
        document.body.addEventListener('focusout', () => {
          this.showAdjust = false;
        })
      } else {
        window.addEventListener('resize', () => {
          if (window.innerHeight < H) {
            this.stepBtnOne = false;
          } else {
            this.stepBtnOne = true;
          }
        })


        window.onresize = function() {
          if (document.body.scrollHeight < h) {
            this.showAdjust = true;
          } else {
            this.showAdjust = false;
          }
        }
      }*/
    },
    watch: {

    },
    beforeDestroy() {

    },
    methods: {
      setNormalStatus() {

        let arr = this.offerList;
        if (arr.length && arr.length > 0) {
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].isChosen == 1) {
              this.$set(arr[i], 'isChosen', 0);
            }
          }
        }

        this.idArr = [];
        this.idArr1 = [];
        this.pledgeTotal = 0;
        this.nonPledgeTotal = 0;
        this.choose = 0;
        this.showMask = false;
        this.showPledge = false;
        this.showRemove = false;
        this.page = 1;
        this.sw = true;
        this.options.pullUpLoad = true;
      },
      togglePledge() {
        this.control1 = !this.control1;
      },
      toggleRemove() {
        this.control2 = !this.control2;
      },
      formatFlow(num) {
        let temp;
        if (num < 1024) {
          return temp = num + 'KB';
        } else if (num / 1024 < 1024) {
          return temp = (num / 1024).toFixed(1) + 'MB';
        } else if (num / 1024 / 1024 < 1024) {
          return temp = (num / 1024 / 1024).toFixed(1) + 'GB';
        } else if (num / 1024 / 1024 / 1024 < 1024) {
          return temp = (num / 1024 / 1024 / 1024).toFixed(1) + 'TB';
        }
      },
      getNodeList() {
        newNodeList(this.page, this.per).then((data) => {
          console.log(data);
          if (data.status && data.status == 1) {
            this.offerList = [];
            if (data.data && data.data.length > 0) {
              for(let i = 0; i < data.data.length; i++) {
                let item = data.data[i];
                this.$set(item, 'isChosen', 0);
                // this.offerList.push(item);
              }
              this.offerList = data.data;
            }
            if (!data.data || data.data == null || data.data.length == 0) {
              this.offerList = [];
            }
          }
        }).catch((err) => {
            this.showToast(err.info, 'warn');
        })
      },
      deleteCurrentNode(id, index, arr, val) {
        if (this.isSubmiting) {
          return;
        }
        this.isSubmiting = true;
        deleteNode(id).then((data) => {
          this.isSubmiting = false;
        // console.log(data);
          if (data.status && data.status == 1) {
            this.showToast('删除节点成功', 'succcess');
            arr.splice(index, 1);
            if (val == 1) {
              if (this.choose > 0) {
                this.choose--;
              }
            }
            /*this.getNodeList();*/
          }
        }).catch((err) => {
          this.isSubmiting = false;
          this.showToast(err.info, 'warn');
        })
      },
      onPullingUp() {
        this.page++;
        if (this.sw) {
          newNodeList(this.page, this.per).then((data) => {
            if (data.data && data.data.length > 0) {
              for (let i = 0; i < data.data.length; i++) {
                let item = data.data[i];
                this.$set(item, 'isChosen', 0);
              }
              this.offerList = this.offerList.concat(data.data);
              this.sw = true;
              if (this.choose < this.offerList.length) {
                this.selectAll1 = false;
              }
            }
            if (!data.data || data.data == null || data.data.length == 0) {
              this.sw = false;
              this.options.pullUpLoad = false;
              return;
            }
          }).catch((err) => {
              this.showToast(err.info, 'warn');
          })
        }
      },
      getMiningInfo() {
        newMiningInfo().then((data) => {
          console.log(data);
          if (data.status && data.status == 1) {
            this.nodeData = data.data;
            /*if (data.data.router) {
              this.selfChipIdleNum = data.data.router.incompleteTokenNum;
              this.rentChipIdleNum = data.data.router.incompleteTokenRentNum;
              this.nodeNum = data.data.router.nodeNum;
              this.nodePledgeNum = data.data.router.nodePledgeNum;
              this.tokenNum = data.data.router.tokenPledgedNum;
            }
            if (data.data.num) {
              this.selfIdleNum = data.data.num.idleNum;
              this.rentNum = data.data.rentNum.idleNum + data.data.rentNum.miningNum;
            }
            if (data.data.rentNum) {
              this.rentIdleNum = data.data.rentNum.idleNum;
            }*/
          }
        }).catch((err) => {
          this.showToast(err.info, 'warn');
        })
      },
      cancelChoose() {
        this.choose = 0;
        this.selectAll = false;
        this.selectArr = [];
        this.idArr = [];
        this.idArr1 = [];
        let arr = this.offerList;
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].isChosen == 1) {
            this.$set(arr[i], 'isChosen', 0);
          }
        }
      },
      toggleChoose(val, index, arr, id) {
        if (val == 0) {
          val = 1;
          this.choose++;
          if (this.choose >= arr.length) {
            this.choose = arr.length;
            this.selectAll = true;
          }
          this.addArrItem(id, index, arr);
        } else if (val == 1) {
          val = 0;
          this.choose--;
          if (this.choose < arr.length) {
            this.selectAll = false;
          }
          this.deleteArrItem(id, index, arr);
        }
        this.$set(arr[index], 'isChosen', val);
        // this.addOrDeleteArrItem(id, code, index);
      },
      /*向选定数组里面插入一条*/
      addArrItem(id, index, arr) {
        let item = {
          id: id, index: index
        };
        this.selectArr.push(item);

        if (arr[index].token_status == 1 && (arr[index].status == 1 || arr[index].status == 2)) {
          this.idArr.push(id);
          this.nonPledgeTotal++;
        } else if (arr[index].token_status == 2 && arr[index].status != 3) {/*  item.token_status == 2 && item.status != 3 */
          this.idArr1.push(id);
          this.pledgeTotal++;
        }
        console.log(this.nonPledgeTotal, this.pledgeTotal, this.idArr, this.idArr1);
        // this.getCurrentAllCodes();
      },
      deleteArrItem(id, index, arr) {
        if (this.selectArr.length > 0) {
          for (let i = 0; i < this.selectArr.length; i++) {
            if (id == this.selectArr[i].id) {
              this.selectArr.splice(i, 1);
            }
          }
        }
        /*if (this.idArr.length > 0) {
          for (let j = 0; j < this.idArr.length; j++) {
            if (id == this.idArr[j]) {
              this.idArr.splice(j, 1);
            }
          }
        }*/
        if (arr[index].token_status == 1 && (arr[index].status == 1 || arr[index].status == 2)) {
          if (this.idArr.length > 0) {
            for (let j = 0; j < this.idArr.length; j++) {
              if (id == this.idArr[j]) {
                this.idArr.splice(j, 1);
              }
            }
          }
          this.nonPledgeTotal--;
        } else if (arr[index].token_status == 2 && arr[index].status != 3) {/*  item.token_status == 2 && item.status != 3 */
          if (this.idArr1.length > 0) {
            for (let k = 0; k < this.idArr1.length; j++) {
              if (id == this.idArr1[k]) {
                this.idArr1.splice(k, 1);
              }
            }
          }
          this.pledgeTotal--;
        }
        console.log(this.nonPledgeTotal, this.pledgeTotal, this.idArr, this.idArr1);
        // this.getCurrentAllCodes();
      },

      goProfitDetail() {
        this.$router.push({path: '/profitDetail', query: {
          /*availableCvnt: this.availableCvnt,
           pledgeCvnt: this.router.pledgeCvnt*/
        }});
      },
      showWarningNotice(val) {
        this.violationNum = val;
        this.showWarn = true;
      },
      keepSame() {
        this.showNotice = false;
      },
      cancelRemoveAll() {
        this.showRemoveAll = false;
      },
      cancelPledgeAll() {
        this.showPledgeAll = false;
      },
      /*inputFocus() {
        setTimeout(function(){
          window.scrollTo(0,document.body.clientHeight);
        }, 500);
      },*/
      backToTop() {
        this.$refs.scroll.scrollTo(0,0,2000);
      },
      pageScroll({y}) {
        if(y < -380){
          this.showBackTop = true
        }else{
          this.showBackTop = false
        }
      },
      /*onPullingDown() {
        // this.offerList = [];
        this.page = 1;
        this.sw = true;
        this.options.pullUpLoad = true;
        this.getUserTokenInfo();
        this.getTokenTradeList();
      },*/

      reFreshImg () {
        this.$nextTick(() => {
          this.$refs['look-active-scroll'].refresh();
        })
      },
      showExplain() {
        this.activeImg = require('assets/images/newMining/explain.png');
        this.showAds = true;
      },
      closeActive() {
        this.showAds = false;
      },
      closeWarn() {
        this.showWarn = false;
      },
      openPledgeAllBox() {
        if (this.nonPledgeTotal == 0) {
          this.showToast('请选择可质押节点进行质押！', 'warn');
          return;
        }
        this.way1 = 2;
        this.showPledgeAll = true;
      },
      openRemoveAllBox() {
        if (this.pledgeTotal == 0) {
          this.showToast('请选择至少一个可取消质押的节点！', 'warn');
          return;
        }
        this.way1 = 3;
        this.showRemoveAll = true;
      },
      openRemoveBox(item, arr, i) {
        this.indexNum = i;
        this.way = 3;
        this.nodeId = item.node_id;
        this.nodeName = item.name;
        if (!this.control2) {
          this.showMask = true;
          this.showRemove = true;
        } else {
          this.confirmSingleRemove(arr, i);
        }
      },
      confirmPledgeAll() {
        let postData = {
          node_id: this.idArr,
          way: this.way1
        };
        if (this.isSubmiting) {
          return;
        }
        this.isSubmiting = true;
        batchNodePledge(postData).then((data) => {
          console.log(data);
          this.showToast('批量质押成功', 'succcess');
          this.isSubmiting = false;
          this.showPledgeAll = false;
          this.setNormalStatus();
          this.getMiningInfo();
          this.getNodeList();
        }).catch((err) => {
          this.isSubmiting = false;
          if (err.status == 10002) {
            this.showPledgeAll = false;
            this.showNotice = true;
          } else {
            this.showToast(err.info, 'warn');
          }
          /*this.showToast(err.info, 'warn');*/
        })
      },
      showChargeNotice() {
        this.showNotice = false;
        this.showToast('请前往首页进行充值', 'warn');
      },
      confirmRemoveAll() {
        let postData = {
          node_id: this.idArr1,
          way: this.way1
        };
        if (this.isSubmiting) {
          return;
        }
        this.isSubmiting = true;
        batchNodePledge(postData).then((data) => {
          console.log(data);
        this.showToast('批量解除质押成功', 'succcess');
        this.isSubmiting = false;
        this.showRemoveAll = false;
        this.setNormalStatus();
        this.getMiningInfo();
        this.getNodeList();
      }).catch((err) => {
        this.isSubmiting = false;
        this.showToast(err.info, 'warn');
      })
      },
      confirmSingleRemove(arr, i) {
        if (this.isSubmiting) {
          return;
        }
        this.isSubmiting = true;
        singleNodePledge(this.nodeId, this.way).then((data) => {
          this.isSubmiting = false;
          // console.log(data);
          if (data.status && data.status == 1) {
            this.showToast('解除质押成功', 'succcess');
            this.showMask = false;
            this.showRemove = false;
            this.setNormalStatus();
            this.getMiningInfo();
            this.$set(arr[i], 'token_status', 3);
            /*this.getNodeList();*/
          }
        }).catch((err) => {
            this.isSubmiting = false;
            this.showToast(err.info, 'warn');
        })
      },
      openPledgeBox(item, arr, i) {
        console.log(i);
        this.indexNum = i;
        this.way = 2;
        this.nodeId = item.node_id;
        this.nodeName = item.name;
        if (!this.control1) {
          this.showMask = true;
          this.showPledge = true;
        } else {
          this.confirmSinglePledge(arr, i);
        }
      },
      confirmSinglePledge(arr, i) {
        if (this.isSubmiting) {
          return;
        }
        this.isSubmiting = true;
        singleNodePledge(this.nodeId, this.way).then((data) => {
          // console.log(data);
          this.isSubmiting = false;
          if (data.status && data.status == 1) {
            this.showToast('质押成功', 'succcess');
            this.showMask = false;
            this.showPledge = false;
            this.setNormalStatus();
            this.getMiningInfo();
            this.$set(arr[i], 'token_status', 2);
            /*this.getNodeList();*/
          }
        }).catch((err) => {
            this.isSubmiting = false;
            this.showToast(err.info, 'warn');
        })
      },
      cancelSinglePledge() {
        this.showMask = false;
        this.showPledge = false;
      },
      cancelSingleRemove() {
        this.showMask = false;
        this.showRemove = false;
      },
      closeMask(ev) {
        if (!this.$refs.maskContent.contains(ev.target)) {
          this.showMask = false;
          this.showRemove = false;
          this.showPledge = false;
        }
      },
      showToast(msg, type) {
        const toast = this.$createToast({
          time: 2000,
          txt: msg,
          type: type
        });
        toast.show();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .pag {
    background: #F5F5FB;
    height: 100%;
    font-size:30px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .adjust-height{
    position:relative;
    bottom:144px;
  }
  .pledge-banner {
    width:750px;
    height:254px;
    /*border-radius:14px 14px 0 0;*/
    /*margin: 34px 30px 0 30px;*/
    margin: 0;
    padding-top: 47px;
    h3 {
      /*padding-right: 68px;*/
      font-size:36px;
      font-weight:600;
      color:rgba(255,255,255,1);
      text-shadow:0 2px 4px rgba(0,89,240,0.5);
      margin-bottom: 16px;
      text-align: center;
      white-space:nowrap;
      strong{
        font-weight:600;
        color:#FCDFAD;
      }
      span{
        display:inline-block;
        width:100px;
        height:1px;
        background:#C3CAEA;
        vertical-align:middle;
      }
      .left{
        margin-right:18px;
      }
      .right{
        margin-left:18px
      }
    }
  }

  .node-data{
    width:690px;
    margin:0 auto 30px;
    background:rgba(255,255,255,1);
    box-shadow:0 1px 2px 0 rgba(10,29,87,0.2);
    border-radius:14px;
    h2{
      padding:30px 0;
      text-align:center;
      color:#71768C;
      font-size:28px;
      span{
        color:#202C5B;
        font-weight:600;
      }
    }
    .data-normal{
      display:flex;
      padding:27px 26px;
      border-bottom:1px solid #F5F5F5;
      >div{
        flex:1;
        h3{
          margin-bottom:16px;
          font-size:28px;
          color:#71768C;
          img{
            width:22px;
            height:33px;
            margin-left:20px;
            vertical-align:middle;
          }
        }
        p{
          font-weight:600;
          color:#202C5B;
        }
      }
    }
    .data-title{
      >div{
        h3{
          font-size: 24px;
        }
        p{
          font-size: 24px;
        }
      }
      .data-left{
        text-align:left;
        p{
          font-size: 40px;
          color:#00A989;
        }
      }
      .data-right{
        text-align:right;
        p{
          font-size: 40px;
          color:#202C5B;
        }
      }
    }
  }
  .node-first{
    margin:-124px auto 20px;
  }


  .pledge-banner-content {
    width:360px;
    height:138px;
    background:rgba(255,255,255,.2);
    border-radius:10px;
    margin-right: 64px;
    margin-left: auto;
    text-align: center;
    padding-top: 16px;
    font-size: 26px;
    color: #fff;
    div {
      margin-bottom: 16px;
      i {
        padding: 0 5px;
        font-style: normal;
      }
    }
  }



  .router-pledge {
    width:100%;
    height:254px;
    background: url("~assets/images/newMining/banner.png") 0 0 no-repeat;
    background-size: cover;
    /*background: url("~assets/images/token/router.png") 24px center / 174px 174px no-repeat,
    linear-gradient(210deg,rgba(73,189,250,1) 0%,rgba(43,117,243,1) 100%);*/
  }


  .token-types {
    height: 104px;
    background: #fff;
    font-size:30px;
    color:rgba(29,40,88,1);
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 58px;
      height: 58px;
      margin-right: 12px;
    }
    span {
      margin-right: 38px;
    }
  }






  .scroll-area{
    /*height:calc(100% - 370px);*/
    padding-top:24px;
    background:rgba(255,255,255,1);
    >h4{
      margin-top:19px;
      margin-bottom:24px;
      padding-left:30px;
      font-size:20px;
      color:#71768C;
    }
    .tab-area{
      display:flex;
      justify-content:space-between;
      align-items:center;
      /*margin-top:24px;*/
      padding:0 30px;

      .tab-info{
        font-size:34px;
        color:#202C5B;
        span{
          display:inline-block;
          width:6px;
          /*height:36px;*/
          margin-right:15px;
          background:rgba(43,117,243,1);
        }
        img{
          display:inline-block;
          width:36px;
          height:36px;
          margin-left:23px;
          vertical-align:bottom;
        }
      }
      .tab-btn{
        width:360px;
        height:72px;
        line-height:72px;
        border-radius:10px 10px 0 0;
        background:#E5E5E9;
        span{
          display:inline-block;
          width:49.99999%;
          height:100%;
          text-align:center;
          font-size:30px;
          color:#838899;
          cursor:pointer;
        }
        .selected{
          color:#1D2858;
          background:rgba(255,255,255,1);
          border-radius:10px 10px 0 0;
        }
      }
    }

  }

  .code-content{
    background:#fff;
    /*height:calc(100% - 46px);*/
    .code-title{
      padding:27px 30px;
      border-top:1px solid #F5F5F5;
      font-size:22px;
      color:#202C5B;
      div{
        display:inline-block;
        text-align:center;
      }
      div:first-child{
        width:3.99999%;
      }
      div:nth-child(2){
        width:11.99999%;
      }
      div:nth-child(3){
        width:19.99999%;
      }
      div:nth-child(4){
        width:19.99999%;
      }
      div:nth-child(5){
        width:7.99999%;
      }
      div:nth-child(6){
        width:15.99999%;
      }
      div:last-child{
        width:19.99999%;
        text-align:right;
      }
    }
    .chip-info{
      display:flex;
      padding:7px 46px 7px 50px;
      justify-content:space-between;
      align-items:center;
      border-bottom:1px solid #f5f5f5;
      p{
        /*flex:1;*/
        display:flex;
        align-items:center;
        font-size:26px;
        color:#1D2858;
        img{
          width:58px;
          height:58px;
          margin-right:12px;
        }
      }
      /*p:last-child{
        margin-left:auto;
      }*/
    }
    .no-result-wrapper{
      position:relative;
      height:calc(100vh - 570px);
      h2{
        /*padding:12px 0;*/
        position:absolute;
        width:250px;
        height:330px;
        top:-48px;
        bottom:0;
        left:0;
        right:0;
        margin:auto;
        text-align:center;
        color: #838899;
        font-size:26px;
        img{
          display:block;
          margin:0 auto 20px;
          width:250px;
          height:274px;
        }
      }
    }

  }
  .fregment{
    min-height:calc(100vh - 570px);
  }
  .scroll-list-wrap{
    /*height:100%;*/
    background:#F5F5FB;
    padding-top:8px;
    padding-bottom:1px;
  }
  .code-item{
    width:100%;;
    margin:1px 0 8px;
    background:#FFF;
    /*padding: 12px 0 32px;*/
    /*padding: 32px 0 32px;*/
    /*box-shadow:0 0 6px 0 rgba(102,102,102,0.3);
    border-radius:14px;*/
    .title{
      display:flex;
      justify-content:space-between;
      align-items:center;
      span{
        width:270px;
        padding:2px 21px 3px 13px;
        background:rgba(23,62,143,0.4);
        border-radius:0 14px 14px 0;
        font-size:24px;
        color:rgba(255,255,255,1);
      }
      i{
        margin-right:74px;
        font-style:normal;
      }
      strong{
        display:inline-block;
        padding:14px 46px 13px;
        background:rgba(23,62,143,1);
        border-radius:10px 0 0 10px;
        font-size:26px;
        color:rgba(255,255,255,1);
        cursor:pointer;
      }
    }
    .detail{
      display:flex;
      /*margin-top:32px;*/
      justify-content:space-between;
      align-items:center;
      padding:19px 24px 19px 24px;
      .token{
        display:flex;
        width:100%;
        align-items:center;
        text-align:center;
        .check-box{
          width:6%;
          text-align:left;
          img{
            width:35px;
            height:35px;
          }
        }
        .serial-num{
          width:11%;
          p{
            font-size:26px;
            font-weight:400;
            color:rgba(32,44,91,1);
            img{
              width:32px;
              height:28px;
            }
          }
        }
        .name{
          width:25%;
          text-align:left;
          p{
            margin-bottom:16px;
            height:35px;
            font-size:24px;
            font-weight:600;
            color:rgba(32,44,91,1);
            white-space:nowrap;
            text-overflow:ellipsis;
            overflow:hidden;
          }
          .status{
            width:70px;
            height:30px;
          }
          .storage{
            width:22px;
            height:30px;
            margin-left:8px;
          }
        }
        .flow{
          width:18%;
          font-size:24px;
          font-weight:400;
          color:rgba(32,44,91,1);
        }
        .online-time{
          width:10%;
          font-size:24px;
          font-weight:600;
        }
        .mining-way{
          width:20%;
          p{
            margin-bottom:18px;
            font-size:24px;
            white-space:nowrap;
          }
          h4{
            font-size:20px;
          }
        }
        .action{
          width:20%;
          text-align:right;
          .btn{
            width:110px;
            height:48px;
            line-height:48px;
            border-radius:8px;
            margin-left:auto;
            font-size:22px;
            text-align:center;
          }
          .unable-btn{
            border:1px solid rgba(153,153,153,1);
            color:rgba(153,153,153,1);
          }
          .able-btn{
            border:1px solid rgba(43,117,243,1);
            color:#2B75F3;
          }
          .warning-btn{
            border:1px solid rgba(243,109,43,1);
            color:#F36D2B;
          }
          .token-pledge{
            width:120px;
            white-space:nowrap;
            border:1px solid #00a989;
            color:#00a989;
          }
          .text{
            margin-bottom:18px;
            text-align:center;
            color:#202C5B;
            font-size:22px;
          }
          h4{
            text-align:center;
            color:#202C5B;
            font-size:20px;
          }
        }
      }

    }
    .progress-bar{
      .success{
        width:100%;
        height:4px;
        background:rgba(16,213,146,1);
      }
      .failure{
        height:4px;
        background:#EB3257;
      }
    }
    .chip-detail{
      .chip-content{
        border-top:1px solid #F5F5F5;
        h4{
          display:flex;
          align-items:center;
          justify-content:space-between;
          margin:0 24px;
          padding:14px 24px;
          border-bottom:1px solid #F5F5F5;
          strong{
            flex:1;
            display:inline-block;
            max-width:340px;
            height:35px;
            line-height:35px;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            font-size:26px;
            color:#202C5B;
          }
          img{
            width:74px;
            height:74px;
            margin-right:80px;
          }
          span{
            display:inline-block;
            padding:12px 0;
            font-size:26px;
            color:#DC0630;
            cursor:pointer;
          }
        }
      }
    }
  }
  .add-margin-bottom{
    margin-bottom:144px;
  }

  .mask{
    position:fixed;
    z-index:9991;
    height:100%;
    width:100%;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0, 0, 0, 0.5);

    .general-height{
      /*height: 500px;*/
      height: 67.46vh;
      background:rgba(255,255,255,1);
    }
    .special-height{
      height: 55.46vh!important;
      background:rgba(255,255,255,1);
    }
    .title{
      position:relative;
      padding:29px 0 28px;
      font-size:34px;
      border-bottom:1px solid rgba(245,245,245,1);
      color:#202C5B;
      text-align:center;
      img{
        position:absolute;
        left:30px;
        top:27px;
        width:20px;
        height:34px;
      }
    }
    .number-group{
      position:absolute;
      z-index:9992;
      bottom:0;
      left:0;
      right:0;
      height:448px;
      >div:first-child{
        border-top:1px solid rgba(245,245,245,1);
      }
      .number-btn{
        display:flex;
        div{
          flex:1;
          height:111px;
          line-height:111px;
          font-size:50px;
          color:#333;
          text-align:center;
          border-bottom:1px solid rgba(245,245,245,1);
          border-right:1px solid rgba(245,245,245,1);
          -webkit-tap-highlight-color:rgba(0,0,0,0.15);
        }
        div:active{
          background:rgba(0,0,0,0.15);
        }
        div:last-child{
          border-right:none;
        }
        .no-num{
          background:#e3e7ee;
          img{
            width:44px;
            height:32px;
            display:block;
            margin:40px auto;
          }
        }
      }
    }
    .shopping-detail{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;

      .content{
        margin:97px 30px 0;
        h2{
          margin-bottom:66px;
          text-align:center;
          font-size:30px;
          color:#202C5B;
          font-weight:600;
          span{
            font-size:72px;
          }
        }
        p{
          display:flex;
          justify-content:space-between;
          font-size:28px;
          padding-bottom:29px;
          border-bottom:1px solid #ececec;
          span{
            color:#71768C;
          }
          strong{
            color:#202C5B;
          }
          input{
            width:250px;
            height:84px;
            text-indent:15px;
            background:rgba(248,248,248,1);
            border:1px solid rgba(23,62,143,1);
            border-radius:6px;
          }
        }
        p:last-child{
          margin-top:30px;
        }
        h4{
          font-size:28px;
          line-height:1.55;
          /*text-align:center;*/
          color:#71768C;
          span{
            color:#EB3257;
          }
        }
      }
      .confirm-content{
        margin:32px 30px 0;
        h1{
          margin-bottom:65px;
          font-size:28px;
          color:#71768C;
          text-align:center;
          span{
            color:#EB3257;
          }
        }
        .number{
          margin-top:30px;
        }
        .notice{
          margin-top:25px;
          font-size:26px;
          color:rgba(32,44,91,1);
          text-align:center;
          img{
            width:34px;
            height:34px;
            vertical-align:sub;
            margin-right:15px;
          }
        }
      }
      .official-content{
        p{
          padding-bottom:52px;
          align-items:center;
          /*border-bottom:none;*/
        }
        .warn{
          padding:0 30px;
          line-height:1.65;
          font-size:24px;
        }
      }
      .result{
        /*margin-top:97px;*/
        margin-top:45px;
        text-align:center;
        img{
          width:80px;
          height:80px;
          margin-bottom:41px;
        }
        h3{
          margin-bottom:20px;
          font-size:28px;
          color:#202C5B;
          span{
            font-size:72px;
          }
        }
        p{
          font-size:24px;
          color:#71768C;
        }
      }
      .pay-btn{
        position:absolute;
        bottom:30px;
        height:84px;
        line-height:84px;
        text-align:center;
        border-radius:8px;
        color:#fff;
        width:calc(100% - 60px);
        margin:0 30px;
        font-size:34px;
        p{
          display: inline-block;
          width:48%;
          margin-right:3.99999%;
          border-radius:8px;
          background:rgba(23,62,143,1);
        }
        p:last-child{
          margin-right:0;
        }
      }
    }
    .pay-password{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;
      .password-wrapper{
        display:flex;
        margin:43px 30px 0;
        height:88px;
        line-height:88px;
        border:1px solid rgba(209,209,209,1);
        border-radius:10px;
        span{
          flex:1;
          text-align:center;
          border-right:1px solid rgba(209,209,209,1);
          strong{
            display:block;
            width:20px;
            height:20px;
            border-radius:50%;
            background:#333;
            margin:34px auto;
          }
        }
        span:last-child{
          border-right:none;
        }
      }
      .forget-password{
        color:#1253FC;
        width:25%;
        padding:12px 0;
        margin:12px auto 0;
        text-align:center;
        font-size:28px;
      }
      .pay-loading{
        position:absolute;
        z-index:9993;
        bottom:0;
        left:0;
        right:0;
        height:calc(100% - 70px);
        background:#fff;
        .paying{
          position:absolute;
          left:50%;
          top:50%;
          transform:translate(-50%, -50%);
          text-align:center;
          font-size:30px;
          color:#4B74E8;
          img{
            display:block;
            width:40px;
            height:40px;
            margin:0 auto 15px;
          }
        }
      }

    }
    .id-check{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;
      .check-title{
        position:relative;
        img{
          position:absolute;
          left:30px;
          top:29px;
          width:34px;
          height:34px;
        }
      }
      .check-content{
        margin-top:32px;
        padding:0 30px;
        p{
          text-align:center;
          color:#202C5B;
          font-size:26px;
          line-height:1.5;
        }
        .sms-input{
          height:84px;
          line-height:84px;
          margin-top:28px;
          input{
            display:inline-block;
            height:84px;
            line-height:84px;
            width:59.9999%;
            text-indent:22px;
            font-size:30px;
            border-radius:10px 0 0 10px;
            border:1px solid rgba(227,227,227,1);
            border-right:none;
            box-shadow:0 0 0 rgba(0,0,0,0);
            -webkit-appearance:none;
            outline:none;
            background:#F6F7F8;
          }
          span{
            display:inline-block;
            width:39.9999%;
            height:84px;
            line-height:84px;
            border-radius:0 10px 10px 0;
            vertical-align:top;
            background:#D1D1D1;
            color:#fff;
            font-size:30px;
            text-align:center;
            /*border:1px solid rgba(227,227,227,1);
            border-left:none;*/
          }
        }
        .finish-btn{
          height:84px;
          line-height:84px;
          margin-top:32px;
          text-align:center;
          color:#fff;
          font-size:34px;
          border-radius:8px;
          background:rgba(23,62,143,0.5);
        }
        .success{
          background:rgba(23,62,143,1);
        }
      }
    }
    .adjust-bottom{
      bottom:-15px!important;
    }
  }






  .active-ct{
    position:relative;
    width:84.53333vw;
    /*height:auto;*/
    margin:0 auto;
    border-radius:14px;
    background:#fff;
    .content{
      /*background:#1E213C;*/
      /*margin:0 auto;*/

      /*width:92vw;*/

      /*height:105.33vw;*/
      padding:45px 16px 0;
      margin-bottom:22px;
      -webkit-overflow-scrolling: touch;
      /*overflow:auto;*/
      h2{
        margin-bottom:28px;
        color:#202C5B;
        text-align:center;
        font-size:32px;
      }
      p{
        padding:0 16px;
        color:#202C5B;
        font-size:30px;
        line-height:1.75;
      }
      .pledge{
        padding:0 45px;
      }
      h3{
        line-height:1.75;
        margin-top:-25px;
        margin-bottom:20px;
        /*border-top:1px solid #F1F2F7;*/
        padding-top:30px;
        padding-left:17px;
        font-size:30px;
        color:#71768C;
        span{
          color:#EB3257;
        }
      }
      h1{
        margin-bottom:25px;
        font-size:30px;
        font-weight:600;
        color:#202C5B;
      }
      /*img{
        display:block;
        width:100%;
        min-height:500px;
        height:auto;
        border-radius:6px;
      }*/
    }
    .img-explain{
      /*height:80vh;*/
      height:70vh;
      img{
        width:100%;
      }
    }
    .close{
      /*position:absolute;*/
      z-index:9999;
      width:100%;
      height:108px;
      line-height:108px;
      border-top:1px solid #D0D4E4;
      /*bottom:160px;*/
      /*margin-top:-390px;*/
      cursor:pointer;
      p{
        font-size:30px;
        color:#1253FC;
        text-align:center;
        /*img{
          width:42px;
          height:42px;
          margin-right:20px;
          vertical-align:middle;
        }*/
      }
      /*>img{
        width:70.2%;
      }*/
    }
    .upgrade-member {
      margin: 0 auto 35px;
      width: 634px;
      /*height: 481px;*/
      /*height: 380px;*/
      -webkit-overflow-scrolling: touch;
      overflow: auto;
      background:#fff;
      border-radius:14px;
      h2{
        margin:92px auto 36px;
        font-size:32px;
        text-align:center;
        color:#202C5B;
      }

      h3{
        margin:0 auto 80px;
        text-align:center;
        font-size:30px;
        line-height:1.5;
        color:#202C5B;
      }
      h4{
        font-size:13px;
        text-align:center;
      }
      .submit-btn{
        height:108px;
        line-height:108px;
        width:100%;
        font-size:0;
        margin:15px auto 0;
        border-top:1px solid #D0D4E4;
        text-align:center;
        span{
          display:inline-block;
          width:49.99999%;
          border-radius:5px;
          font-size:30px;
          color:#1253FC;
        }
        span:last-child{
          color:#1253FC;
          border-left:1px solid #D0D4E4;
          /*margin-right:10px;*/
        }
      }
    }
    .submit-btn{
      height:108px;
      line-height:108px;
      width:100%;
      font-size:0;
      margin:15px auto 0;
      border-top:1px solid #D0D4E4;
      text-align:center;
      span{
        display:inline-block;
        width:49.99999%;
        border-radius:5px;
        font-size:30px;
        color:#1253FC;
      }
      span:last-child{
        color:#1253FC;
        border-left:1px solid #D0D4E4;
        /*margin-right:10px;*/
      }
    }


  }

  .pledge-actions {
    z-index: 80;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    padding: 0 30px;
    justify-content: center;
    align-items: center;
    background: #F5F5FB;
    height: 144px;
    div {
      width:330px;
      height:84px;
      background:rgba(23,62,143,1);
      border-radius:10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size:32px;
      color:rgba(255,255,255,1);
      margin-right: 30px;
      &:last-of-type {
         margin-right: 0;
      }
    }
  }


  .backtop {

    position: fixed;
    right: 10px;
    bottom: 120px;
    z-index: 500;
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 46px;
      height: 46px;
      display: block;
    }
  }

  /*.refresh-img-rotate{

    animation: img-Rotate 0.5s linear 1 forwards;
  }
  @keyframes img-Rotate {
    0%{
      transform-origin: 50% 50%;
      transform:rotate(0deg);
    }
    50%{
      transform-origin: 50% 50%;
      transform:rotate(90deg);
    }
    100%{
      transform-origin: 50% 50%;
      transform:rotate(180deg);
    }
  }*/

  .fixed-position{
    position:fixed;
  }
  .static-position{
    position:absolute;
  }

  .fade-enter-active, .fade-leave-active{
    /*opacity:1;
    background: rgba(7, 17, 27, 0.8);*/
    transition: all 0.5s;
    transform:translate(0, 0);
  }
  .fade-enter, .fade-leave-active{
    /*opacity:0;
    background:rgba(7, 17, 27, 0);*/
    transform: translate(0, 100%);
  }
  input::-webkit-input-placeholder{
    color: #B7C3D1;
    font-size:26px;
  }
</style>
<style>
  .cube-toast-tip{
    /*max-width:13em;*/
    font-size:28px;
    max-width:15.5em;
    max-height:6em;
    line-height:40px;
  }
  .cube-toast.cube-popup {
    z-index: 10000!important;
  }
</style>











